<template>
  <div class="denglu">
    <div class="login-container">
      <h2>Login</h2>
      <div class="tabs">
        <button :class="{ active: isEmailLogin }" @click="isEmailLogin = true">
          邮箱登录
        </button>
        <button
          :class="{ active: !isEmailLogin }"
          @click="isEmailLogin = false"
        >
          账号密码登录
        </button>
      </div>
      <div v-if="isEmailLogin">
        <label for="email">Email:</label>
        <input type="text" id="email" v-model="email" />
        <button @click="sendVerificationCode" :disabled="!email">
          发送验证码
        </button>
        <label for="verification-code">验证码:</label>
        <input type="text" id="verification-code" v-model="verificationCode" />
        <button
          @click="loginEmail()"
          :disabled="
            isEmailLogin ? !email || !verificationCode : !username || !password
          "
        >
          登录
        </button>
      </div>
      <div v-else>
        <label for="username">员工ID:</label>
        <input type="text" id="username" v-model="username" />
        <label for="password">用户密码:</label>
        <input type="password" id="password" v-model="password" />
        <button
          @click="loginId()"
          :disabled="
            isEmailLogin ? !email || !verificationCode : !username || !password
          "
        >
          登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { denglu, sendemail, emaillogin } from "@/apis/yanwengang/yanwengang.js";
export default {
  data() {
    return {
      isEmailLogin: true,
      email: "",
      verificationCode: "",
      username: "",
      password: "",
    };
  },

  methods: {
    //发送验证码
    sendVerificationCode() {
      sendemail(this.email).then((ok) => {
        console.log(ok);
      });
    },
    //邮箱登录
    loginEmail() {
      emaillogin(this.email, this.verificationCode).then((ok) => {
        console.log(ok);
        if (ok.data.code == 200) {
          this.$router.replace("/shouye");
        } else {
          alert("用户不存在");
        }
      });
    },
    //账号密码登录
    loginId() {
      denglu(this.username, this.password).then((ok) => {
        console.log(ok);
        // if (
        //   ok.data.data.roleList[0].rid == 3 ||
        //   ok.data.data.roleList[0].rid == 2
        // ) {
        //   this.$router.replace("/zong");
        // } else {
        //   this.$router.replace("/shouye");
        // };

        if (ok.data.code == 203) {
          alert("用户不存在");
        } else if (ok.data.code == 205) {
          alert("密码错误");
        } else if (
          ok.data.data.roleList[0].rid == 3 ||
          ok.data.data.roleList[0].rid == 2
        ) {
          this.$router.replace("/zong");
        }else if(ok.data.data.roleList[0].rid == 1){
          this.$router.replace("/shouye");
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  background: url(https://img.zzxdc.com/public/2020/12/02/FFPeaMriGJWA88z.jpg)
    no-repeat;
  background-size: cover;
  opacity: 0.8;
  margin: 200px auto;
  max-width: 500px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h2 {
  text-align: center;
  margin-bottom: 20px;
}
.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
button {
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button.active {
  background-color: #007aff;
  color: #ffffff;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 10px;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>
